<template>
	<view class=" block" v-if="pageShow">
		<view class="" style="padding-bottom: 150rpx;">
			<view class="flexbetween mainpadding ffffff xiahuaxian" @click="jumpzhuye(dataAll.user.id)">
				<view class="flexleft">
					<image class="touxiang margin_right1" :src="dataAll.user.avatar_text" mode=""></image>
					<view class="">
						<view class="ershiba xiaohei">{{dataAll.user.nickname}}</view>
						<view class="smalltext xiaohui margin_top1">{{dataAll.createtime_text}}</view>
					</view>
				</view>
				<view class="flexcenter guaznbtn" v-if="dataAll.is_gz==0 && myuser_id!=dataAll.user.id" @click.stop="guanzhufn(dataAll.user.id,dataAll)">
					<view class="margin_right1">
						<u-icon name="plus" color="#fff" size="12"></u-icon>
					</view>
					<view class="">关注</view>
				</view>
				<view class="dhbtn flexcenter ershiba margin_right2" v-if="dataAll.is_gz==1 && dataAll.user.id!=myuser_id"
					@click.stop="cancelguanzhufn(dataAll.user.id,dataAll)">取消关注</view>
			</view>
			<view class="ffffff mainpadding2">
				<view class="flexleft " v-if="dataAll.qwdx">
					<u-icon name="heart-fill" color="#ff0000" size="20"></u-icon>
					<view class=" sanshier xiaohei">期望<text v-if="qingshaonian!=1">对象</text>：{{dataAll.qwdx}}</view>
				</view>
				<view class="xiaohei sanshier" style="padding-top: 30rpx;">{{dataAll.content}}</view>
				<image class="margin_top" style="width: 100%;" v-for="(item,index) in dataAll.images_text" :key="index" :src="item" mode="widthFix"></image>
			</view>

			<!-- 评价 -->
			<view class="ffffff mainpadding margin_top2">
				<view class="ershiba xiaohei" v-if="dataAll.user.id!=myuser_id">{{list.total?'评论'+list.total:"暂无评论"}}</view>
				<view class="flexleft" v-if="dataAll.user.id==myuser_id">
					<view class="flexcolumn margin_right5" @click="isActive=1">
						<text class="flexcenter ershiba"
							:class="isActive==1?'xiaohei':'xiaohui'">{{list.total?'评论'+list.total:"暂无评论"}}</text>
						<view class="margin_top" :class="isActive==1?'lines':'line'"></view>
					</view>
					<view class="flexcolumn" @click="isActive=2">
						<text class="flexcenter ershiba"
							:class="isActive==2?'xiaohei':'xiaohui'">点赞{{listdz.total || ""}}</text>
						<view class="margin_top" :class="isActive==2?'lines':'line'"></view>
					</view>
				</view>
				<template v-if="isActive==1">
					<view class="flextop margin_top" v-for="item in list.data" :key="item.id" @click="focus=true;pid=item.id">
						<image class="pltx" :src="item.user.avatar_text" mode="" @click.stop="jumpzhuye(item.user.id)"></image>
						<view class="xiahuaxian" style="width: 88%;">
							<view class="strongtext xiaohui">{{item.user.nickname}}</view>
							<view class=" margin_top1">
								<text class="ershiba margin_right1">{{item.content}}</text>
								<text class="ershiba xiaohui">{{item.createtime_text}}</text>
							</view>
							<view class="flextop margin_top" v-for="ite in item.childlist" :key="ite.id">
								<image class="plxtx" :src="ite.user.avatar_text" mode="" @click.stop="jumpzhuye(ite.user.id)"></image>
								<view class="" style="width: 92%;">
									<view class="strongtext xiaohui">{{ite.user.nickname}}</view>
									<view class="margin_top1">
										<text class="ershiba margin_right1">{{ite.content}}</text>
										<text class="ershiba xiaohui">{{ite.createtime_text}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="margin_top flexbetween" v-for="item in listdz.data" :key="item.id" @click="jumpzhuye(item.user_id)">
						<view class="flexleft" style="width: 73%;">
							<image class="touxiangs margin_right2" :src="item.user.avatar_text" mode=""></image>
							<view class="">
								<view class="sanshier fonweight">{{item.user.nickname}}</view>
							</view>
						</view>
						<view class="dhbtn" v-if="item.is_gz==1" @click.stop="cancelguanzhufn(item.user_id,item)">已关注</view>
						<view class="dlbtn" v-if="item.is_gz==0 && myuser_id!=item.user_id" @click.stop="guanzhufn(item.user_id,item)">关注</view>
					</view>
				</template>
				
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff mainpadding flexbetween" v-if="isActive==1">
			<view class="shurbox flexleft">
				<image class="dbtx" src="../static/image/system/nans.png" mode=""></image>
				<input type="text" placeholder="友善评论，文明发言" :focus="focus" @blur="focus=false;pid=''" v-model="contents" @confirm="sendmsg" confirm-type="send">
			</view>
			<view class="flexright">
				<view class="margin_right3" @click="dianzan(listid,dataAll)">
					<view class="dticon">
						<image src="../static/image/system/dzs.png" v-if="dataAll.is_dz==1" mode=""></image>
						<image src="../static/image/system/dz.png" v-if="dataAll.is_dz==0" mode=""></image>
					</view>
					<view class="smalltext textcenter">{{dataAll.dz_num}}</view>
				</view>
				<view class="margin_right3">
					<view class="dticon">
						<image src="../static/image/system/xx.png" mode=""></image>
					</view>
					<view class="smalltext textcenter">{{dataAll.comment_num}}</view>
				</view>
				<view class="margin_right3" @click="sharevideoOrdt(2,listid)">
					<view class="dticon">
						<image src="../static/image/system/fx.png" mode=""></image>
					</view>
					<view class="smalltext textcenter">{{dataAll.share_num}}</view>
				</view>
				<view class="" @click="dashang">
					<view class="dticon">
						<image src="../static/image/system/s.png" mode=""></image>
					</view>
					<view class="smalltext textcenter">{{dataAll.zs_num}}</view>
				</view>
			</view>
		</view>
		<dashang ref="dashangref" :type="2" @dashangadd="dashangadd"></dashang>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import dashang from '@/components/dashang/dashang.nvue'
	export default {
		components:{
			dashang
		},
		data() {
			return {
				listid: "",
				dataAll: {},
				pageShow: false,
				page: 1,
				list: {
					data: []
				},
				contents:"",
				pid:"",
				focus:false,
				myuser_id:"",
				isActive:1,
				pagedz: 1,
				listdz: {
					data: []
				},
				qingshaonian:1
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		
		onShow() {
			this.qingshaonian = uni.getStorageSync("qingshaonian") || 0
			this.myuser_id = uni.getStorageSync("user_id")
			this.getDetail()
		},
		methods: {
			guanzhufn(b_user_id,item) {
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.is_gz = 1
					}
				})
			},
			cancelguanzhufn(b_user_id,item) {
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.is_gz = 0
					}
				})
			},
			dashangadd(){
				this.dataAll.zs_num = Number(this.dataAll.zs_num) +1
			},
			dashang(index) {
				uni.setStorageSync("videoID", this.listid);
				uni.setStorageSync("b_user_id", this.dataAll.user.id);
				this.$refs.dashangref.show = true
			},
			sendmsg(){
				if(this.contents==""){
					httpRequest.toast("评论内容不能为空")
					return false
				}
				let data = {
					user_dt_id: this.listid,
					pid: this.pid,
					content: this.contents,
				}
				let url = '/api/userdtcl/addDtComment';
				httpRequest.request(url, 'GET', data).then(res => {
					if (res.code == 1) {
						this.pid = ""
						this.contents = ""
						this.dataAll.comment_num = Number(this.dataAll.comment_num) + 1
						this.init()
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			guanzhufn(b_user_id,item) {
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.is_gz = 1
					}
				})
			},
			cancelguanzhufn(b_user_id,item) {
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.is_gz = 0
					}
				})
			},
			dianzan(id,item) {
				
				httpRequest.request('/api/userdtcl/clDtDz', 'GET', {
					id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.dz_num = item.is_dz==1?Number(item.dz_num)-1:Number(item.dz_num)+1
						item.is_dz = item.is_dz==1?0:1
						if(this.dataAll.user.id==this.myuser_id){
							this.initdz()
						}
					}
				})
			},
			init(isPage, page) {
				let _this = this
				let url = "/api/userdtcl/dtCommentIndex"
				let data = {
					page: page || 1,
					limit: _this.limit,
					id: this.listid
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = null;
				let page = null;
				if(this.isActive==1){
					list = _this.list
					page = _this.page
				}else{
					list = _this.listdz
					page = _this.pagedz
				}
				if (list.last_page <= page) {
					return false;
				}
				page++;
				if(this.isActive==1){
					_this.page = page;
					_this.init(true, page);
				}else{
					_this.pagedz = page;
					_this.initdz(true, page);
				}
				
			},
			getDetail() {
				httpRequest.request('/api/userdtcl/dtDetail', 'GET', {
					id: this.listid,
				}).then(res => {
					if(res.data.user.id==this.myuser_id){
						this.initdz()
					}
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			initdz(isPage, page){
				let _this = this
				let url = "/api/userdtcl/getUserDtDz"
				let data = {
					page: page || 1,
					limit: 12,
					user_dt_id: this.listid
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listdz;
						if (isPage == true) {
							_this.listdz.data = dataList.data.concat(resList.data);
						} else {
							this.listdz = res.data
							_this.listdz.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lines {
		width: 60rpx;
		height: 2rpx;
		background-color: #2361ff;
	}
	
	.line {
		width: 80rpx;
		height: 2rpx;
	}
	.dticon {
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shurbox {
		background: #F4F4FC;
		border-radius: 32rpx;
	}

	.dbtx {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
	}

	.plxtx {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.pltx {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.tupian {
		width: 686rpx;
		height: 1220rpx;
	}

	.block {
		background: #F9F9F9;
		min-height: calc(100vh - 100rpx);
		height: auto;
	}

	.guaznbtn {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		width: 138rpx;
		height: 64rpx;
		background: #2361FF;
		border-radius: 32rpx;
	}
	.dhbtn {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		width: 138rpx;
		height: 64rpx;
		background: #F5F5F5;
		border-radius: 32rpx;
	}
	.touxiang {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}
	.touxiangs{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
</style>